// src/pages/Home/index.js
import {Layout} from 'antd'
import RootHeader from "@/components/layout/RootHeader";
import { SiderMenusRoute } from "./router";
import './index.css'
/**
 * 导入Unicons图标库的CSS样式文件
 * 该文件包含了Unicons图标库的线条风格图标样式
 * 用于在项目中使用Unicons图标
 */
import '@iconscout/unicons/css/line.css';
import React, {useState} from 'react';
import FooterComponent from "@/components/layout/FooterComponent";
import { Outlet } from 'react-router-dom';

const {Sider,Content,Footer} = Layout

function Home() {
    /**
     * 处理折叠状态变化的回调函数
     * @param {boolean} collapsed - 新的折叠状态值
     * @returns {void}
     */
    const [collapsed, setCollapsed] = useState(false);
    const onCollapse = (collapsed) => {
        setCollapsed(collapsed);
    };

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 顶部导航 */}
            <RootHeader />

            {/* 主体区域 */}
            <Layout >
                {/* 左侧边栏 */}
                <Sider width={200}
                       collapsible
                       collapsed={collapsed}
                       onCollapse={onCollapse}
                       className="app-sider">
                    <SiderMenusRoute />
                </Sider>

                {/* 右侧内容区 */}
                <Layout className={collapsed ? 'content-normal' : 'content-max'}>
                    {/* 主内容区 */}
                    <Content style={{ margin: '24px 16px 0' }}>
                        <Outlet />
                    </Content>

                    {/* 底部信息 */}
                    <Footer >
                        <FooterComponent/>
                    </Footer>
                </Layout>
            </Layout>
        </Layout>

    );
}

export default Home;
